<template>
  <div>
    <n-modal
      :show="props.showModal"
      :on-mask-click="maskClick"
      :class="{ 'blow-up': isBlowUp }"
    >
      <n-card
        style="width: 100%; height: 100vh"
        title="内容预览"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
        header-style="padding:20px;padding-bottom:10px;"
        content-style="overflow: hidden; overflow-y: auto;padding:20px;padding-top:0px;"
      >
        <template #header-extra>
          <n-button @click="closeModal" text size="tiny" color="#ff69b4">
            <template #icon>
              <n-icon size="20">
                <Close></Close>
              </n-icon>
            </template>
          </n-button>
        </template>
        <n-spin :show="loading">
          <MdPreview
            previewTheme="github"
            :editorId="editorId"
            :modelValue="content"
            style="background: transparent; min-height: 90vh"
          />
        </n-spin>
      </n-card>
    </n-modal>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Close } from "@vicons/ionicons5";
import { getArticleContentById } from "@/api/article";
import { getNotesContentById } from "@/api/notes";
import { MdEditor, MdPreview, MdCatalog } from "md-editor-v3";
import "md-editor-v3/lib/preview.css";
import warningIcon from "@/assets/img/svg/warning.svg";
import errorIcon from "@/assets/img/svg/error.svg";
import mingcute from "@/assets/img/svg/mingcute.svg";

const props = defineProps({
  showModal: {
    type: Boolean,
    default: () => false,
  },
  data: {
    type: String,
    default: "",
  },
});
const isBlowUp = ref(false);
const editorId = "preview-only-notes";
const content = ref();
const loading = ref(false);

const init = (val, isContent = false, type = 1) => {
  if (!isContent) {
    if (type == 1) {
      loading.value = true;
      getArticleContentById({ id: val })
        .then((res) => {
          content.value = customMarkdownParser(res.data.content);
          loading.value = false;
        })
        .catch((err) => {
          loading.value = false;
        });
    } else if (type == 2) {
      getNotesContentById({ id: val })
        .then((res) => {
          content.value = customMarkdownParser(res.data);
          loading.value = false;
        })
        .catch((err) => {
          loading.value = false;
        });
    }
  } else {
    content.value = customMarkdownParser(val);
  }
};

const maskClick = () => {
  isBlowUp.value = true;
  setTimeout(() => {
    isBlowUp.value = false;
  }, 500);
};
const emit = defineEmits(["closeModal"]);
 
// 假设你有一个方法来切换模态框的显示状态
const closeModal = () => {
  emit("closeModal");
};
const customMarkdownParser = (input) => {
  const patterns = [
    {
      regex: /::: (\w+)\s+(.+?)\s+:::/g,
      replacement: (match, type, content) =>
        `<div class='${type} block'><iframe src='${
          type == "error" ? errorIcon : warningIcon
        }'></iframe>${content}</div>`,
    },
    {
      regex: /\|\|(.+?)\|\|/g,
      replacement: (match, type, content) =>
        `<span title='你知道到太多了' class='p-span-tag'>${type}</span>`,
    },
    {
      regex: /==(.+?)==/g,
      replacement: (match, lang, content) =>
        `<mark class='mark'><span class='mark-span rounded-md'>${lang}</span></mark>`,
    },
    {
      regex: /Polaris \[(.*?)\]\((.*?)\)/g,
      replacement: (match, lang, content) =>
        `<span style="display: inline-block;text-indent: 0em;"><a href="${content}" target="_blank" class='hover-link' style='text-decoration: none;'>${lang}</a><img style='width:17px;vertical-align: sub;pointer-events: none;' src='${mingcute}'></img><span class='p-a-span'>${content}</span></span>`,
    },
  ];
  let result = input;

  patterns.forEach((pattern) => {
    result = result.replace(pattern.regex, pattern.replacement);
  });

  return result;
};

defineExpose({ init });
</script>

<style scoped>
.blow-up {
  animation: scaleAnimation 0.5s infinite;
  transform-origin: center center;
  /* 设置缩放中心为元素中心点 */
}

@keyframes scaleAnimation {
  0% {
    transform: scale(1);
    transform-origin: center center;
  }

  50% {
    transform: scale(1.1);
    /* 在动画中点缩放到1.1倍 */
    transform-origin: center center;
  }

  100% {
    transform: scale(1);
    /* 在动画结束时缩放回原始大小 */
    transform-origin: center center;
  }
}
</style>
<style lang="scss">
.card-h {
  width: 100%;
  margin: auto;
  margin-top: 10rem !important;
  display: grid;
  grid-template-columns: 17% auto 17%;
  &-c {
    border: 1px solid #ccc5c57a;
    border-radius: 10px;
    margin-bottom: 50px;
    background-color: #ffffff99;
    border-radius: 10px;
    padding: 3em 1em;
  }
  .p-side {
    position: fixed;
    max-width: 150px;
    max-height: 55vh;
    overflow-y: auto;
    margin: 0 1rem;
  }
  .like-icon {
    margin: 4rem 0;
    gap: 3rem;
    .like-d {
      display: flex;
      align-items: center;
      cursor: pointer;
      gap: 1rem;
      flex: 1;
      padding: 20px 10px;
      border-radius: 8px;
      transition: all 0.5s ease;
      div {
        display: flex;
        flex-direction: column;

        span:nth-child(2) {
          font-size: 1.2rem;
        }
      }
    }
    .like-d:hover {
      background: rgba(229, 102, 186, 0.397);
    }

    display: flex;
    justify-content: space-between;
    align-items: center;
    .icon {
      cursor: pointer;
      transition: transform 0.3s ease;
    }
    .icon:hover {
      transform: scale(1.1);
    }
  }
  @media screen and (max-width: 1000px) {
    .like-icon {
      display: block;
    }
  }
}
.h-title {
  padding: 10px 20px;
  text-align: left;
  font-size: 1.2rem;
  .items-center {
    font-size: 0.8rem;
    color: #998e8e;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: flex-start;
    gap: 3px;
    .p-divider {
      width: 1.5px;
      background: #d9cece;
      height: 12px;
      margin: 3px;
    }
  }
}
.card-warn {
  background: rgb(255 251 235);
  border: solid 1px rgb(252 211 77);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  margin: 20px 10px;
  span {
    font-size: 1rem;
  }
}

@media screen and (max-width: 1000px) {
  .card-h {
    display: block;
  }
}

#signaturePath {
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  fill: transparent;
  animation: drawSignature 8s linear infinite;
}

@keyframes drawSignature {
  0% {
    stroke-dashoffset: 2400;
  }

  15% {
    fill: transparent;
  }

  35%,
  75% {
    stroke-dashoffset: 0;
    fill: #303030; //v-bind(logoColor);
  }

  90%,
  100% {
    stroke-dashoffset: 2400;
    fill: transparent;
  }
}

// #preview-only-notes-preview {
//   > p:first-of-type {
//     text-indent: 0;
//     &::first-letter {
//       float: left;
//       font-size: 2.4em;
//       margin-right: 0.1em;
//     }
//   }
//   > p {
//     line-height: 1.5;
//     text-indent: 2em;
//     clear: both;
//     letter-spacing: 2px;
//   }
// }
figure img {
  border-radius: 10px;
  width: 100%;
  margin: auto;
}
</style>
